<template>
  <el-row>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item
      >
        <el-form-item prop="roleName">
          <el-input
              placeholder="请输入角色名"
              v-model="this.roleName"
              clearable
          >
          </el-input>
        </el-form-item
        >
      </el-form-item>
      <el-form-item
      >
        <el-button type="primary" @click="lookRolesByName(this.roleName)"
        >搜索
        </el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="this.deleteRoles(this.deleteRoleIds)"
        >批量删除
        </el-button>
      </el-form-item>
      <el-form-item
      >
        <el-button type="primary" @click="this.insertDialogVisible = true"
        >添加角色
        </el-button>
      </el-form-item
      >
    </el-form>
  </el-row>
  <el-row>
    <el-col>
      <el-table
          height="500"
          :data="tableData"
          border
          @selection-change="getRoleIds"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column
            v-for="column in this.tableColumn"
            :key="column.index"
            :label="column.label"
            :prop="column.prop"
            align="center"
            :width="column.width"
        ><!-- 权限列特殊处理 -->
          <template #default="scope" v-if="column.prop === 'permissions'">
            <el-tag
                :type="scope.row.permissions[0] == 'Y' ? 'success' : 'danger'"
            >管理员界面
            </el-tag
            >
            <el-tag
                :type="scope.row.permissions[1] == 'Y' ? 'success' : 'danger'"
            >跑腿员界面
            </el-tag
            >
            <el-tag
                :type="scope.row.permissions[2] == 'Y' ? 'success' : 'danger'"
            >用户界面
            </el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button size="small" @click="this.updateRoleClick(scope.row)"
            >修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="deleteOneRole(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col></el-col>
  </el-row>
  <!-- 添加一名角色 -->
  <el-dialog
      v-model="insertDialogVisible"
      title="添加角色"
      width="30%"
      center
      draggable
  >
    <el-form
        :model="insertRoleForm"
        :rules="roleRule"
        ref="insertRole"
        @keyup.enter="this.insertOneRole(this.insertRoleForm)"
    >
      <el-form-item prop="roleName" label="角色名">
        <el-input v-model="this.insertRoleForm.roleName"></el-input>
      </el-form-item>
      <el-form-item prop="permissions" label="权限">
        <el-checkbox v-model="this.insertRoleForm.checked[0]" size="small"
        >管理员
        </el-checkbox
        >
        <el-checkbox v-model="this.insertRoleForm.checked[1]" size="small"
        >跑腿员
        </el-checkbox
        >
        <el-checkbox v-model="this.insertRoleForm.checked[2]" size="small"
        >用户
        </el-checkbox
        >
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="insertDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="this.insertOneRole(this.insertRoleForm)"
      >添加
      </el-button>
    </template>
  </el-dialog>
  <!-- 修改角色 -->
  <el-dialog
      v-model="updateDialogVisible"
      title="修改角色"
      width="30%"
      center
      draggable
  >
    <el-form
        :model="updateRoleForm"
        :rules="roleRule"
        ref="updateRole"
        @keyup.enter="this.updateOneRole(this.updateRoleForm)"
    >
      <el-form-item prop="roleName" label="角色名">
        <el-input v-model="this.updateRoleForm.roleName"></el-input>
      </el-form-item>
      <el-form-item prop="permissions" label="权限">
        <el-checkbox v-model="this.updateRoleForm.checked[0]" size="small"
        >管理员
        </el-checkbox
        >
        <el-checkbox v-model="this.updateRoleForm.checked[1]" size="small"
        >跑腿员
        </el-checkbox
        >
        <el-checkbox v-model="this.updateRoleForm.checked[2]" size="small"
        >用户
        </el-checkbox
        >
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="this.updateOneRole(this.updateRoleForm)"
      >修改
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import {
  lookAllRoles,
  insertOneRole,
  updateOneRole,
  deleteRole,
  lookRolesByName,
} from "../api/role";

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //查询需要的角色Id
      roleId: "",
      //查询所需的角色名
      roleName: "",
      //添加时需要的表单元素
      insertRoleForm: {
        roleName: "",
        permissions: "",
        checked: [false, false, false],
      },
      //修改时需要的表单元素
      updateRoleForm: {
        id: "",
        roleName: "",
        permissions: "",
        checked: [false, false, false],
      },
      //添加对话框是否显示
      insertDialogVisible: false,
      //修改对话框是否显示
      updateDialogVisible: false,
      //批量删除时的id集合
      deleteRoleIds: [],
      //表单校验
      roleRule: {
        //角色名
        roleName: [
          {
            required: true,
            message: "角色名不得为空!",
            trigger: "blur",
          },
        ],
        permissions: [
          {
            required: true,
            message: "请指定权限!",
            trigger: "blur",
          },
        ],
      },
      //角色列表
      roleMap: [],
      //列宽
      defaultColumn: 250,
      //表格列名集合
      tableColumn: [
        {
          index: 1,
          label: "编号",
          prop: "id",
          width: 55,
        },
        {
          index: 2,
          label: "角色名",
          prop: "roleName",
          width: 120,
        },
        {
          index: 3,
          label: "权限",
          prop: "permissions",
          width: 270,
        },
      ],
    };
  },
  created() {
    this.lookAllRole();
  },
  methods: {
    //查看所有角色逻辑
    lookAllRole() {
      lookAllRoles().then((req) => {
        this.tableData = req.data.data;
        console.log(this.tableData);
      });
    },
    //根据角色名查询角色
    lookRolesByName(role) {
      console.log(role);
      if (role === "") {
        this.lookAllRole();
        return;
      }
      lookRolesByName(role).then((req) => {
        this.tableData = req.data.data;
      });
    },
    //添加一名角色
    insertOneRole(obj) {
      var per = "";
      for (let i = 0; i < 3; i++) {
        per += obj.checked[i] ? "Y" : "N";
      }
      obj.permissions = per;
      console.log(obj);
      this.$refs["insertRole"].validate((valid) => {
        if (valid) {
          insertOneRole(obj).then((req) => {
            if (req.data.success) {
              this.$message({
                type: "success",
                message: "添加角色成功!可继续进行添加!",
                showClose: true,
              });
              this.lookAllRole();
              // this.insertDialogVisible = false;
              // this.insertRoleForm = {};
            } else {
              this.$message({
                type: "error",
                message: "添加角色失败!",
                showClose: true,
              });
            }
          });
        }
      });
    },
    //修改一名角色
    updateOneRole(obj) {
      var per = "";
      for (let i = 0; i < 3; i++) {
        per += obj.checked[i] ? "Y" : "N";
      }
      obj.permissions = per;
      console.log(obj);
      this.$refs["updateRole"].validate((valid) => {
        if (valid) {
          updateOneRole(obj).then((req) => {
            if (req.data.success) {
              this.$message({
                type: "success",
                message: "修改角色成功!",
                showClose: true,
              });
              this.updateDialogVisible = false;
              this.lookAllRole();
            } else {
              this.$message({
                type: "error",
                message: "修改角色失败!",
                showClose: true,
              });
            }
          });
        }
      });
    },
    //删除一条角色信息
    deleteOneRole(ids) {
      var id = [ids];
      this.$confirm("你真的要删除这条角色的信息吗?(真的永久)", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteRole(id).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除角色成功!",
              showClose: true,
            });
            this.lookAllRole();
          } else {
            this.$message({
              type: "error",
              message: "删除角色失败!请检查该角色是否存在学生!",
              showClose: true,
            });
          }
        });
      });
    },
    //批量删除
    deleteRoles(ids) {
      console.log(ids);
      this.$confirm(`你真的要删除${ids.length}条角色的信息吗?(真的永久)`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteRole(ids).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除角色成功!",
              showClose: true,
            });
            this.lookAllRole();
          } else {
            this.$message({
              type: "error",
              message: "删除角色失败!",
              showClose: true,
            });
          }
        });
      });
    },
    //修改角色前的附加操作
    updateRoleClick(obj) {
      this.updateRoleForm.id = obj.id;
      this.updateRoleForm.roleName = obj.roleName;
      this.updateRoleForm.permissions = obj.permissions;
      console.log(this.updateRoleForm);
      for (let i = 0; i < 3; i++) {
        this.updateRoleForm.checked[i] =
            this.updateRoleForm.permissions[i] === "Y";
      }
      console.log(obj);
      this.updateDialogVisible = true;
    },
    //获取选中的Id值
    getRoleIds(val) {
      var ids = [];
      for (let i = 0; i < val.length; i++) {
        ids[i] = val[i].id;
      }
      this.deleteRoleIds = ids;
    },
  },
};
</script>

<style>
</style>